<template>
  <view class="app-container">
    <view class="title-padding"></view>
    <view class="top-container">
      <uni-list class="list">
        <uni-list-item class="list-item" title="头像">
          <template v-slot:right>
            <image
              @click="chooseImage"
              style="
                width: 80upx;
                height: 80upx;
                margin-right: 10upx;
                border-radius: 40upx;
              "
              :src="'http://cyjs.pzhkj.cn' + info.m_avatar"
              mode="aspectFill"
            ></image>
          </template>
        </uni-list-item>
        <uni-list-item class="list-item" title="用户名" :showArrow="false">
          <template v-slot:right>
            <view>
              <input
                class="text-right"
                type="text"
                v-model="info.m_login_name"
                placeholder="请输入用户名"
                name="m_login_name"
                @blur="handleUpdateLoginName"
              />
            </view>
          </template>
        </uni-list-item>
        <uni-list-item
          class="list-item"
          title="登录密码"
          :showArrow="false"
          rightText="修改"
          @click="handleGoToPwd"
        ></uni-list-item>
        <uni-list-item
          class="list-item"
          title="绑定手机"
          :showArrow="false"
          disabled
          :rightText="info.m_mobile"
        />
      </uni-list>
    </view>
    <view class="row-margin"></view>
    <view class="bottom-container">
      <uni-list class="list">
        <uni-list-item class="list-item" title="姓名" :showArrow="false">
          <template v-slot:right>
            <view>
              <input
                class="text-right"
                type="text"
                v-model="info.m_real_name"
                placeholder="请输入姓名"
                name="m_real_name"
                @blur="handleUpdateRealName"
              />
            </view>
          </template>
        </uni-list-item>
        <uni-list-item class="list-item" title="身份证" :showArrow="false">
          <template v-slot:right>
            <view>
              <input
                class="text-right"
                v-model="info.m_shenfenzheng"
                type="idcard"
                placeholder="请输入身份证"
                @blur="handleUpdateSFZ"
              />
            </view>
          </template>
        </uni-list-item>
        <uni-list-item class="list-item" title="手机号" :showArrow="false">
          <template v-slot:right>
            <view>
              <input
                class="text-right"
                v-model="info.m_mobile"
                type="number"
                name="m_mobile"
                placeholder="请输入手机号"
                @blur="handleUpdatePhoneNumber"
              />
            </view>
          </template>
        </uni-list-item>
        <uni-list-item class="list-item" title="地区" :showArrow="false">
          <!-- :rightText="info.m_sheng + info.m_shi" -->
          <template v-slot:right>
            <region-picker @change="handleRegionChange" :value="regionList">
              <view class="picker">
                {{ info.m_sheng }} {{ info.m_shi }} {{ info.m_qu }}
              </view>
            </region-picker>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script>
import uniList from '@/uni-components/uni-list/uni-list.vue'
import uniListItem from '@/uni-components/uni-list-item/uni-list-item.vue'
import regionPicker from '@/components/region-picker/region-picker.vue'
import { getInfo, updateInfo } from '../../api/user.js'
import { uploadFile } from '../../api/common.js'
import { zones_tree } from '@/components/region-picker/region-picker.js'

const getRegionNameByCode = (code1, code2, code3) => {
  let fIndex = zones_tree.findIndex(e => e.code === code1)
  let sIndex = zones_tree[fIndex].children.findIndex(e => e.code === code2)
  let tIndex = zones_tree[fIndex].children[sIndex].children.findIndex(
    e => e.code === code3
  )

  let fName = zones_tree[fIndex].name
  let sName = zones_tree[fIndex].children[sIndex].name
  let tName = zones_tree[fIndex].children[sIndex].children[tIndex].name
  return [fName, sName, tName]
}

const getRegionCodeByName = (name1, name2, name3) => {
  let fIndex = zones_tree.findIndex(e => e.name === name1)
  let sIndex = zones_tree[fIndex].children.findIndex(e => e.name === name2)
  let tIndex = zones_tree[fIndex].children[sIndex].children.findIndex(
    e => e.name === name3
  )
  let fCode = zones_tree[fIndex].code
  let sCode = zones_tree[fIndex].children[sIndex].code
  let tCode = zones_tree[fIndex].children[sIndex].children[tIndex].code
  return [fCode, sCode, tCode]
}

export default {
  components: {
    uniList,
    uniListItem,
    regionPicker,
  },
  data() {
    return {
      windowHeight: 0,
      imgListUrl: 'https://www.diyimei.net/upload/2018/1537192515751749.jpg',
      info: {
        insert_time: '',
        m_avatar: '',
        m_id: 1,
        m_login_name: '',
        m_mobile: '',
        m_real_name: '',
        m_shenfenzheng: '',
        m_sheng: '',
        m_shi: '',
        m_qu: '',
      },
      regionList: [350000, 350100, 350104],
    }
  },
  created() {
    this._refresh()
  },
  methods: {
    _refresh() {
      getInfo().then(res => {
        if (res.code === 1 && res.data) {
          let codes = []
          if (res.data.m_sheng && res.data.m_shi && res.data.m_qu) {
            codes = getRegionCodeByName(
              res.data.m_sheng,
              res.data.m_shi,
              res.data.m_qu
            )
          }
          this.regionList = codes
          Object.keys(res.data).forEach(keyName => {
            this.info[keyName] = res.data[keyName] || ''
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    handleUpdate() {
      updateInfo(this.info)
        .then(res => {
          if (res.code === 1) {
            console.log('更新成功！')
            // uni.showToast({
            //   title: '更新成功！',
            //   icon: 'success',
            // })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
        .catch(err => {
          uni.showToast({
            title: '修改失败！',
            icon: 'none',
          })
        })
    },
    handleRegionChange(e) {
      console.log(e.detail.value)
      // let names = getRegionNameByCode(
      //   e.detail.value[0],
      //   e.detail.value[1],
      //   e.detail.value[2]
      // )
      this.$set(this.info, 'm_sheng', e.detail.value[0])
      this.$set(this.info, 'm_shi', e.detail.value[1])
      this.$set(this.info, 'm_qu', e.detail.value[2])

      setTimeout(() => {
        this.handleUpdate()
      }, 300)
    },
    handleGoToPwd() {
      uni.navigateTo({
        url: '../pwd/index',
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: res => {
          let igmFile = res.tempFilePaths
          uni.uploadFile({
            url: 'http://cyjs.pzhkj.cn/api/common/upload',
            method: 'POST',
            header: {
              'Content-Type': 'multipart/form-data',
            },
            filePath: igmFile[0],
            name: 'file',
            success: res => {
              if (res.statusCode === 200) {
                try {
                  let data = JSON.parse(res.data)
                  if (data.code === 1) {
                    console.log(data.data.url)
                    this.$set(this.info, 'm_avatar', data.data.url)
                    setTimeout(() => {
                      this.handleUpdate()
                    }, 300)
                  } else {
                    uni.showToast({
                      title: data.msg,
                      icon: 'none',
                    })
                  }
                } catch (err) {
                  uni.showToast({
                    title: '上传失败！',
                    icon: 'none',
                  })
                }
              }
            },
          })
        },
      })
    },
    handleUpdateLoginName() {
      setTimeout(() => {
        this.handleUpdate()
      }, 200)
    },
    handleUpdateRealName() {
      setTimeout(() => {
        this.handleUpdate()
      }, 200)
    },
    handleUpdateSFZ() {
      setTimeout(() => {
        this.handleUpdate()
      }, 200)
    },
    handleUpdatePhoneNumber() {
      setTimeout(() => {
        this.handleUpdate()
      }, 200)
    },
  },
  onLoad: function () {},
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  .top-container {
    border-top: 1px solid rgb(237, 239, 246);
    background-color: #fff;
    .list {
      .list-item {
        height: 130upx;
        line-height: 130upx;
        padding-right: 30upx;
        /deep/ .uni-list-item__container {
          padding: 0;
          border-bottom-width: 1px;
          border-bottom-color: rgb(237, 239, 246);
          border-bottom-style: solid;

          .uni-list-item__extra-text {
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(113, 128, 138, 1);
            line-height: 28upx;
          }
        }

        .uni-input-input {
          text-align: right;
        }
      }
    }
  }
  .row-margin {
    height: 20upx;
    background-color: rgba(243, 244, 251, 1);
  }
  .bottom-container {
    background-color: #fff;
    .list {
      .list-item {
        height: 130upx;
        line-height: 130upx;
        padding-right: 30upx;
        /deep/ .uni-list-item__container {
          padding: 0;
          border-bottom-width: 1px;
          border-bottom-color: rgb(237, 239, 246);
          border-bottom-style: solid;

          .uni-list-item__extra-text {
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(113, 128, 138, 1);
            line-height: 28upx;
          }
        }
      }
    }
  }
}
</style>
